<template>
  <div id="order">
    <div style="width: 100%;height: 100%;background-color: #f5f4f9;">
      <div class="zbaff1 zbaff2">
        <ul>
          <li class="li1 clearFloat"  v-for="(item, index) in stayTax" :key="index"  >
            <div class="myOrder_tt">
              <span><i><img src="images/bwm.jpg"/></i>{{item.name}}</span>
              <span class="des">审核中</span>
            </div>
            <a href="javascript:;">
              <div class="ig fl"><img src="images/ls/index_img1.png" /></div>
              <div class="fon fr">
                <div class="fon_sp "><span class="fon1">{{item.details}} </span><span class="fontright">￥{{item.price}}</span></div>
                <div class="clearFloat"></div>
                <div class="fon_sp fon3">2017.10.02 零首付大众途观</div>
                <div class="fon_sp fon3">保险服务 ￥12.00万   X10</div>
                <div class="fon_sp fon2">高配 白色</div>
                <div class="fon_sp fon5">X10</div>
              </div>
            </a>
            <div class="order_btn">
              <div class="fon_sp fon6 ">
                <span data-src='images/tem/bxd.jpg'>外贸合同</span>
                <span data-src='images/tem/ghtzd.png'>客户呈批表</span>
                <span data-src='images/tem/jmbzjsqs.png'>银行手续</span>
                <span data-src='images/tem/sd.png'>开证信息</span>
                <span data-src='images/tem/yyzz.jpg'>信用证到单(随附单据)</span>
              </div>
              <div class="fon_sp fon3">保证金费用 ￥325454</div>
              <div class="clearFloat"></div>
              <div class="fon_sp fon4"><input type="button"  value="申请开证" /><input class="btn_line" type="button" id="" value="取消订单" /></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import { myIndexjs } from '../../../scripts/index.js'

  export default {
    name: "order",
    data(){
      return {
        clicked: 0,
        navOrders: [{name: "所有订单"}, {name: "待开证"}, {name: "待押汇"}, {name: "待垫税"}],
        stayTax: [{name: '北京宝马21', details: '2017款冯晓星', price: '89万'},
          {name: '北京宝马22', details: '2017款冯晓星2', price: '109万'},
          {name: '北京宝马23', details: '2017款冯晓星3', price: '129万'},
        ]

      }
    },
    methods:{
      changeTab(index){
        this.clicked = index;
      }
    }
  }
</script>

<style lang="scss"  scoped>
  @import "../../../style/common";
  @import "../../../style/mixin";
  .zbaff1 ul{margin-bottom: 1.25rem;}
  .zbaff1 ul li{padding: 0.28rem 0.02rem;margin-bottom: 0.04rem;background: #fff;text-align: left;}
  .zbaff1 ul li a{height: 100%;margin-bottom:0.26rem;display: inline-block;width: 100%;}
  .zbaff1 ul li .ig{margin-left: 0.24rem;}
  .zbaff1 ul li .ig img{vertical-align: middle;width: 1.5rem;height: 1.5rem;}
  .zbaff1 ul li .fon{width: 5.65rem;position: relative;float: left;}
  .zbaff1 ul li .fon .fon_sp{padding-left: 0.22rem;}
  .zbaff1 ul li .fon .fon1{line-height:0.32rem;color: #666;font-size: 0.28rem;padding-top: 0.05rem;width: 4rem;float: left;}
  .fon2{line-height: 100%;font-size: 0.22rem;margin-top: 0.14rem;}
  .zbaff1 ul li .fon .fon3{line-height:0.25rem;color: #ccc;font-size: 0.22rem;margin-top: 0.14rem;}
  .fon4{line-height:0.25rem;color: #666;font-size: 0.22rem;padding-top: 0.12rem;margin-top: 0.24rem;text-align: right;padding-right: 0.2rem;}
  .fon4 input{color: #fff;padding:.1rem .3rem;background: #FA2F5D;border: none;border-radius: 0.5rem;float: right;margin-left: 0.2rem;font-size:0.26rem;}
  .fon4 input.btn_line{border: 1px solid #9B9B9B;color: #888;background: none;font-size:0.26rem;}
  .zbaff1 ul li .fon .fon5{position: absolute;right: 0.2rem;top:.55rem;color: #9B9B9B;font-size: 0.2rem;line-height:.32rem;text-align: right;}
  .zbaff1 ul li .fon .fontright{position: absolute;right: 0.16rem;line-height:0.32rem;font-size: 0.28rem;top: 0.06rem;color: #9B9B9B;}
  .fon2{color: #888;}
  .zbaff1 ul li.li2 .fon .fon2{color: #9B9B9B;}
  .myOrder_tt{border-bottom: dashed 1px #dddddd;margin-bottom:0.2rem ;}
  .myOrder_tt span{line-height:0.60rem;font-size: 0.28rem;color: #666;margin-left: 0.24rem;}
  .myOrder_tt span i img{width:0.4rem;padding-right:0.1rem;padding-bottom:0.1rem;}
  .myOrder_tt span.des{float: right;color: #71b247;margin-right:0.2rem;font-size:0.22rem;}
  .myOrder_tt label{height: 0.4rem;}
  .myOrder_tt input[type=checkbox]{width: 0.2rem;height: 0.2rem;}
  .order_btn{margin:0.24rem;border-top: dashed 1px #dddddd;margin-bottom:0;}
  .order_btn .fon3{line-height:0.25rem;color: #ccc;font-size: 0.22rem;margin-top: 0.14rem;float: right;width:5.4rem;}
  .fon6{color: #4A4A4A;font-size: 0.22rem;line-height: 0.36rem;padding-top: 0.22rem;display: inline-block;width: 5.4rem;float: right;}
  .fon6 span{padding:0 0.1rem;border: solid 1px #ffcd79;border-radius: 3px;color: #ee9b11;height: 0.36rem;line-height: 0.36rem;margin-bottom: 0.1rem;float: left;margin-right: 0.1rem;font-size:0.22rem;}

</style>
